<template>
  <div id="app">
    <!-- 顶部UI -->
    <div id="top-container">
      <!-- 头像 -->
      <img :src="require('@/assets/testAvatar.png')" alt="" class="avatar" />
      <!-- 当前持有水量 -->
      <div class="water display">
        <img :src="require('@/assets/icon_water.png')" alt="" class="icon" />
        {{ userData.water }}/100
        <!-- TODO: 测试用加水按钮, 记得删除 -->
        <div :style="{ color: 'red', position: 'absolute', right: '-80px', border: '2px solid red' }" @click="userData.water += 100">测试加水</div>
      </div>
      <!-- 当前持有积分 -->
      <div class="credit display">
        <img :src="require('@/assets/icon_credit.png')" alt="" class="icon" />
        {{ userData.credit }}
      </div>
    </div>

    <!-- 作物 -->
    <div id="plant-container">
      <PlantComponent :data="plantProp" @harvest="harvest"></PlantComponent>
    </div>
    <!-- 底部UI -->
    <div id="bottom-container">
      <!-- 按钮 -->
      <img :src="require('@/assets/button_backpack.png')" alt="" class="button" @click="openBackpack" />
      <img :src="require('@/assets/button_store.png')" alt="" class="button" @click="openStore" />
      <img :src="require('@/assets/button_water.png')" alt="" class="button" @click="irrigate" />
      <img :src="require('@/assets/button_shovel.png')" alt="" class="button" @click="eradicate" />
    </div>
    <!-- 对话框 -->
    <div id="my-dialog"></div>
  </div>
</template>

<script>
import { create } from '@/utils/create.js'
import PlantComponent from './components/PlantComponent.vue'
import MenuComponent from './components/MenuComponent.vue'
import { Dialog } from 'vant'
export default {
  name: 'App',
  components: { PlantComponent, MenuComponent, [Dialog.name]: Dialog, [Dialog.Component.name]: Dialog.Component },
  data() {
    return {
      // 用户信息
      userData: {
        // 用户名
        username: 'test01',
        // 头像路径
        avatar: '',
        // 当前水量
        water: 50,
        // 当前积分
        credit: 1000
      },
      // 背包
      inventoryData: {
        1: {
          // 物品id
          id: 1,
          // 物品数量
          count: 3
        }
      },
      // 当前作物信息
      plantData: {
        // 作物id, 根据作物id在plantInfo中查找作物信息, 小于等于0表示未种植
        id: 1,
        // 当前阶段 未种植=-1 - 种子=0 - 发芽=1 - 长大=2 - 成熟=3
        stage: -1,
        // 当前水量(进度)
        currentWater: -1
      },
      // 作物信息表(只读)
      plantInfo: {
        // 作物id
        1: {
          // 名
          name: '番茄',
          // 成熟阶段
          matureStage: 3,
          // 每个成长阶段所需的水量
          waterToNextStage: [100, 200, 400]
        },
        // 作物id TODO: 至少有两种用于演示的作物
        2: {
          // 名
          name: '玉米',
          // 成熟阶段
          matureStage: 4,
          // 每个成长阶段所需的水量
          waterToNextStage: [125, 280, 460, 600]
        }
      },
      // 物品信息表(只读)
      itemInfo: {
        1: {
          // 物品id
          id: 1,
          // 物品名称
          name: '番茄种子',
          // 物品类型 seed-种子 fertilizer-肥料 plant-作物(成熟的)
          type: 'seed',
          // 关联作物id(-1表示和作物无关)
          plantId: 1,
          // 价值
          price: 100,
          // 等级,
          grade: 1,
          // 可供购买
          purchasable: true,
          // 可供使用(例如种子可以种植, 肥料可以施肥)
          usable: true,
          // 介绍
          description: '播种后经过四个成长阶段成熟, 可以收获成熟番茄换取积分'
        },
        2: {
          // 物品id
          id: 2,
          // 物品名称
          name: '成熟番茄',
          // 物品类型 seed-种子 fertilizer-肥料 plant-作物(成熟的)
          type: 'plant',
          // 关联作物id(-1表示和作物无关)
          plantId: 1,
          // 价值
          price: 1000,
          // 等级,
          grade: 2,
          purchasable: false,
          // 可供使用(例如种子可以种植, 肥料可以施肥)
          usable: false,
          // 介绍
          description: '酸甜可口的番茄, 可以出售换取积分'
        },
        3: {
          // 物品id
          id: 3,
          // 物品名称
          name: '高级肥料',
          // 物品类型 seed-种子 fertilizer-肥料 plant-作物(成熟的)
          type: 'fertilizer',
          // 关联作物id(-1表示和作物无关)
          plantId: -1,
          // 价值
          price: 500,
          // 等级,
          grade: 3,
          purchasable: true,
          // 可供使用(例如种子可以种植, 肥料可以施肥)
          usable: true,
          // 介绍
          description: '使用最新科技的高级肥料, 可以显著提高作物成长速度'
        },
        4: {
          // 物品id
          id: 4,
          // 物品名称
          name: '超级肥料',
          // 物品类型 seed-种子 fertilizer-肥料 plant-作物(成熟的)
          type: 'fertilizer',
          // 关联作物id(-1表示和作物无关)
          plantId: -1,
          // 价值
          price: 700,
          // 等级,
          grade: 5,
          purchasable: true,
          // 可供使用(例如种子可以种植, 肥料可以施肥)
          usable: true,
          // 介绍
          description: '传说中的肥料, 可以吸收地表两米以下的氮磷钾, 使作物的成长速度极大提高'
        },
        5: {
          // 物品id
          id: 5,
          // 物品名称
          name: '玉米种子',
          // 物品类型 seed-种子 fertilizer-肥料 plant-作物(成熟的)
          type: 'seed',
          // 关联作物id(-1表示和作物无关)
          plantId: 2,
          // 价值
          price: 200,
          // 等级,
          grade: 2,
          // 可供购买
          purchasable: true,
          // 可供使用(例如种子可以种植, 肥料可以施肥)
          usable: true,
          // 介绍
          description: '播种后经过五个成长阶段成熟, 可以收获成熟玉米换取积分'
        },
        6: {
          // 物品id
          id: 6,
          // 物品名称
          name: '成熟玉米',
          // 物品类型 seed-种子 fertilizer-肥料 plant-作物(成熟的)
          type: 'plant',
          // 关联作物id(-1表示和作物无关)
          plantId: 2,
          // 价值
          price: 1700,
          // 等级,
          grade: 3,
          purchasable: false,
          // 可供使用(例如种子可以种植, 肥料可以施肥)
          usable: false,
          // 介绍
          description: '软糯香甜的玉米, 可以出售换取积分'
        }
      }
    }
  },
  // 计算属性
  computed: {
    // 当前是否有种植作物
    hasPlant() {
      return this.plantData.stage !== -1
    },
    // 当前作物是否成熟可收获
    isMature() {
      return this.plantData.stage === this.plantInfo[this.plantData.id].matureStage
    },
    // 当前作物的完整信息, 用于传递给植物组件
    plantProp() {
      const currentPlant = this.plantInfo[this.plantData.id]
      return {
        name: currentPlant.name,
        image: this.hasPlant ? require('@/assets/plants/plant_' + this.plantData.id + '/state' + this.plantData.stage + '.png') : {},
        currentWater: this.plantData.currentWater,
        waterToNextStage: currentPlant.waterToNextStage[this.plantData.stage],
        isMature: this.isMature
      }
    }
  },
  methods: {
    // 进度条满后的升级效果
    makeConfetti() {
      this.$confetti.start({
        particles: [
          {
            type: 'heart'
          }
        ],
        defaultColors: ['red', 'pink', '#ba0000'],
        defaultDropRate: 5,
        defaultSize: 15
      })
      setTimeout(() => {
        this.$confetti.stop()
      }, 1500)
    },
    // 实例化菜单组件
    createMenuComponent(_type) {
      // 挂载实例
      const comp = create(MenuComponent, { type: _type, inventory: this.inventoryData, itemInfo: this.itemInfo })
      // 监听事件-使用物品
      comp.$on('useItem', (id) => {
        this.useItem(id)
      })
      // 监听事件-购买物品
      comp.$on('buyItem', (id) => {
        this.buyItem(id)
      })
      // 监听事件-卖出物品
      comp.$on('sellItem', (id) => {
        this.sellItem(id)
      })
      // 监听事件-查询信息
      comp.$on('info', (id) => {
        this.getInfo(id)
      })
    },
    // 显示对话框
    async showDialog(_type, _content) {
      try {
        const result = await Dialog.confirm({
          title: '',
          message: _content,
          getContainer: '#my-dialog',
          showCancelButton: _type !== 'confirm'
        })
        // console.log('对话框点击了确认')
        return true
      } catch (error) {
        // console.log('对话框点击了取消')
        return false
      }
    },
    // 初始化用户信息
    initUserData() {
      // console.log('初始化用户信息')
    },
    // 按钮
    // 打开背包
    openBackpack() {
      // console.log('打开背包')
      this.createMenuComponent('backpack')
    },
    // 打开商店
    openStore() {
      // console.log('打开商店')
      this.createMenuComponent('store')
    },
    // 灌溉
    irrigate() {
      // 判断是否有作物
      if (!this.hasPlant) {
        this.showDialog('confirm', '种点什么再来灌溉吧')
        return
      }
      // 判断是否有水可供灌溉
      if (this.userData.water <= 0) {
        this.showDialog('confirm', '水量不足，晚点再来吧')
        return
      }
      // 判断是否已经成熟
      if (this.isMature) {
        this.showDialog('confirm', '作物已经成熟了，赶快收获吧')
        return
      }
      // 灌溉作物
      // console.log('灌溉作物')
      // 将用户的水量灌溉给植物
      this.plantData.currentWater += this.userData.water
      // 将用户的水量清空
      this.userData.water = 0
      // 如果灌溉后的水量超过了升级所需, 就升级
      while (this.plantData.currentWater > this.plantInfo[this.plantData.id].waterToNextStage[this.plantData.stage]) {
        // 升级
        this.plantData.stage++
        // 播放升级动画
        this.makeConfetti()
        // 判断升级后作物是否成熟
        if (this.isMature) {
          // 成熟, 则将多余的水量留给用户
          this.userData.water = this.plantData.currentWater - this.plantInfo[this.plantData.id].waterToNextStage[this.plantData.stage - 1]
          break
        } else {
          // 没有成熟, 则将多余的水量留给下一阶段
          this.plantData.currentWater -= this.plantInfo[this.plantData.id].waterToNextStage[this.plantData.stage - 1]
        }
      }
    },
    // 铲除
    async eradicate() {
      // console.log('铲除作物')
      // 确认是否有作物
      if (!this.hasPlant) {
        this.showDialog('confirm', '还没有种植作物哦')
        return
      }
      // 确认是否真的要铲除
      if (await this.showDialog('confirmCancel', '确定要铲除作物吗？\n该操作不可逆!')) {
        // 确认铲除, 重置作物stage
        this.resetPlant()
      } else {
        // 取消铲除, 不做任何操作
      }
    },
    // 收获
    harvest() {
      // 判断是否有作物并且作物已经成熟
      if (!this.hasPlant || !this.isMature) {
        this.showDialog('confirm', 'error')
        return
      }
      // 增加对应作物的库存
      // 遍历itemInfo, 找到plantId和当前作物id相同的物品, 并且该物品的类型是plant
      for (var i in this.itemInfo) {
        if (this.itemInfo[i].plantId === this.plantData.id && this.itemInfo[i].type === 'plant') {
          // 找到了, 增加库存
          this.addItemToInventory(i)
          break
        }
      }
      // 重置作物
      this.resetPlant()
      // 弹出对话框, 提示收获成功
      this.showDialog('confirm', '收获成功')
    },
    // 种植
    plant(_id) {
      // console.log('种植作物')
      // 判断是否有作物
      if (this.hasPlant) {
        this.showDialog('confirm', '已经有作物了')
        // 返还种子
        this.inventoryData[_id].count++
        return
      }
      // 重置一次作物状态
      this.resetPlant()
      // 将作物id赋值给作物
      this.plantData.id = this.itemInfo[_id].plantId
      // 将作物的stage置为0
      this.plantData.stage = 0
      // 将作物的currentWater置为0
      this.plantData.currentWater = 0
      this.showDialog('confirm', '种植成功, 要记得浇水哦')
    },
    // 施肥
    fertilize(_id) {
      // TODO: 目前还没确定肥料的功能, 先空着
      this.showDialog('confirm', '还没有设计肥料功能, 假装已经施肥了吧')
    },
    // 重置作物状态
    resetPlant() {
      // console.log('重置作物状态')
      this.plantData.stage = -1
      this.plantData.currentWater = -1
    },
    // 使用物品
    async useItem(_id) {
      // console.log('使用物品' + _id)
      // 确认inventory中是否有该物品, 并且数量大于0
      if (this.inventoryData[_id] && this.inventoryData[_id].count <= 0) {
        this.showDialog('confirm', '你没有这个物品哦')
        return
      }
      // 确认是否是一个可使用的物品
      if (!this.itemInfo[_id].usable) {
        this.showDialog('confirm', '这个物品不能使用哦')
        return
      }
      // 确认是否真的要使用
      if (await this.showDialog('confirmCancel', `确定要使用${this.itemInfo[_id].name}吗？`)) {
        // 确认使用, 则减少对应的inventory元素的count值
        this.inventoryData[_id].count--
        console.log('使用了一个' + this.itemInfo[_id].name)
        // TODO: 根据物品的类型执行不同的操作
        switch (this.itemInfo[_id].type) {
          case 'seed':
            // 种子
            this.plant(_id)
            break
          case 'fertilizer':
            // 肥料
            this.fertilize(_id)
            break
          default:
            break
        }
      }
    },
    // 出售物品
    async sellItem(_id) {
      // console.log('出售物品' + _id)
      // 确认inventory中是否有该物品, 并且数量大于0
      if (this.inventoryData[_id] && this.inventoryData[_id].count <= 0) {
        this.showDialog('confirm', '你没有这个物品哦')
        return
      }

      // 确认用户是否真的要出售
      if (await this.showDialog('confirmCancel', `确定要出售${this.itemInfo[_id].name}吗？\n 你会得到${this.itemInfo[_id].price * 0.5}积分`)) {
        // 减少对应的inventory元素的count值
        this.inventoryData[_id].count--
        // 增加用户积分
        this.userData.credit += this.itemInfo[_id].price * 0.5
      } else {
        // 取消出售, 不做任何操作
      }
    },
    // 购买物品
    async buyItem(_id) {
      // console.log('购买物品' + _id)
      // 确认该物品是否可以购买 just in case
      if (!this.itemInfo[_id].purchasable) {
        this.showDialog('confirm', '该物品不能购买哦')
        return
      }
      // 确认用户的credit是否高于等于物品的价格
      if (this.userData.credit < this.itemInfo[_id].price) {
        this.showDialog('confirm', '积分不足哦')
        return
      }
      // 确认用户是否真的要购买
      if (await this.showDialog('confirmCancel', `确定要购买${this.itemInfo[_id].name}吗？\n 你会花费${this.itemInfo[_id].price}积分`)) {
        // 减少用户积分
        this.userData.credit -= this.itemInfo[_id].price
        // 增加对应的inventory元素的count值
        this.addItemToInventory(_id)
      } else {
        // 取消购买, 不做任何操作
      }
    },
    // 查询物品信息
    getInfo(_id) {
      // confirm对话框显示对应id的物品信息
      this.showDialog('confirm', this.itemInfo[_id].description)
    },
    // 添加库存
    addItemToInventory(_id) {
      // 如果inventory中没有该物品, 则添加该物品
      if (!this.inventoryData[_id]) {
        // 响应式添加属性
        this.$set(this.inventoryData, _id, {
          id: _id,
          count: 1
        })
      } else {
        this.inventoryData[_id].count++
      }
    }
  },
  created() {
    this.initUserData()
  }
}
</script>

<style>
html,
body {
  margin: 0;
  padding: 0;
  height: -webkit-fill-available;
}

#app {
  width: 100vw;
  height: 100%;
  height: -webkit-fill-available;
  /* min-height: -webkit-fill-available; */
  /* border: 10px solid red; */
  background: url('@/assets/background.png') center center no-repeat;
  background-size: cover;
  /* 背景置于底边 */
  background-position: 0 100%;
  overflow: hidden;
}

/* 顶部的UI */
#top-container {
  /* background-color: red; */
  min-height: 145px;
  padding: 0px;
  width: 100vw;
  position: absolute;
  top: 10px;
  /* overflow: hidden; */
}

/* 用户头像 */
#top-container .avatar {
  border-radius: 50%;
  border: 15px solid #d8964a;
  object-fit: cover;
  height: 120px;
  width: 120px;
  margin-left: 10px;
}

/* 信息显示 */
#top-container .display {
  position: absolute;
  width: 200px;
  height: 50px;
  background-color: #d8964a;
  /* border: 1px solid white; */
  left: 180px;
  border-radius: 25px;
  font-size: 38px;
  text-align: end;
  padding-right: 20px;
  color: white;
}

.display .icon {
  height: 40px;
  width: 40px;
  border-radius: 50%;
  /* border: 1px solid white; */
  /* background-color: white; */
  /* margin: 5px; */
  display: inline-block;
  position: absolute;
  top: 5px;
  left: 5px;
  object-fit: contain;
}

/* 水量显示 */
#top-container .water {
  top: 25px;
}

/* 积分显示 */
#top-container .credit {
  bottom: 25px;
}

/* 中间的作物容器 */
#plant-container {
  width: 100vw;
  position: absolute;
  /* bottom: 250px; */
  bottom: 18.5%;
}

/* 底部的按钮容器 */
#bottom-container {
  width: 100vw;
  padding: 0px;
  min-height: 145px;
  position: absolute;
  bottom: 10px;
  display: flex;
  justify-content: space-around;
  /* overflow: hidden; */
}

#bottom-container .button {
  width: 145px;
  height: 145px;
  object-fit: cover;
  border-radius: 50%;
  border: 8px solid #d8964a;
}

/* 对话框容器 */
.dialog-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.25);
  z-index: 100;
}

/* 对话框样式() */
#my-dialog .van-dialog {
  width: 80%;
  background-color: #d8964a;
  border: 5px solid lightyellow;
  font-size: 0.8rem;
  color: white;
}
#my-dialog button {
  /* color: red !important; */
  background: none;
  background-color: #d8964a;
  color: white;
  font-size: 0.6rem;
  margin: 0.2rem;
}
#my-dialog .van-dialog__message {
  color: white;
  font-size: 0.6rem;
  line-height: 0.75rem;
}
</style>
